<template>
  <div class="md-banner-base" :style="{height: height}">
    <swiper class="swiper" :options="swiperOption" v-if="isSlideImg">
      <swiper-slide>
        <img src="../../../assets/img/gw/banner2.png" />
        <div class="md-shared-banner-swiper-content">
          <h1>专业、稳定的第三方投票活动平台</h1>
          <p>100万+活动主办方的共同选择</p>
          <button @click="handleCreateActivity()">创建活动</button>
        </div>
      </swiper-slide>
      <swiper-slide>
        <img src="../../../assets/img/gw/banner3.png" />
        <div class="md-shared-banner-swiper-content">
          <button @click="handleCreateActivity()">创建活动</button>
        </div>
      </swiper-slide>
      <swiper-slide>
        <img src="../../../assets/img/gw/banner4.png" />
        <div class="md-shared-banner-swiper-content">
          <h1>功能全、操作简单</h1>
          <p>单选、多选、必选、多分组联合、多分组互斥等投票逻辑</p>
          <p>批量添加选手、各行业活动模版</p>
          <button @click="handleCreateActivity()">创建活动</button>
        </div>
      </swiper-slide>
      <swiper-slide>
        <img src="../../../assets/img/gw/banner5.png" />
        <div class="md-shared-banner-swiper-content">
          <h1>公平、公正</h1>
          <p>保障活动的公平公正性，永远是我们的首要任务</p>
          <button @click="handleCreateActivity()">创建活动</button>
        </div>
      </swiper-slide>
      <swiper-slide>
        <img src="../../../assets/img/gw/banner1.png" />
        <div class="md-shared-banner-swiper-content">
          <h1>安全、稳定</h1>
          <p>支持大型活动 云服务集群架构</p>
          <p>云服务集群、云数据库集群、云redis数据缓存集群</p>
          <button @click="handleCreateActivity()">创建活动</button>
        </div>
      </swiper-slide>
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
    <div v-else class="banner-container" :style="{'background-image': `url(${src})`,height: height, ...contentStyle}">
      <div class="banner-content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
  name: 'MdBannerBaseComponent',
  props: {
    height: {
      type: String,
      default: '780px'
    },
    /**
     * 是否轮播图
     */
    isSlideImg: {
      type: Boolean,
      default: false
    },
    contentStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    src: {
      default: null
    }
  },
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      user: localStorage.getItem('MD_USER'),
      swiperOption: {
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        autoplay: {
          delay: 5000
        },
        loop: true
      }
    }
  },
  methods: {
    handleCreateActivity() {
      if (!localStorage.getItem('MD_USER')) {
        this.$router.push('/login')
      } else {
        this.$router.push('/manage/home')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.md-banner-base {
  width: 100%;
  box-sizing: border-box;
  .swiper-container {
    height: 100%;
    .swiper-wrapper {
      .swiper-slide {
        position: relative;

        img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .md-shared-banner-swiper-content {
          width: @md-main-width;
          margin: 0px auto;
          position: absolute;
          top: 50%px;
          left: 50%;
          z-index: 10;
          transform: translate(-50%, 90%);
          h1,
          p {
            color: #fff;
          }

          h1 {
            font-size: 48px;
            margin-bottom: 30px;
          }

          p {
            line-height: 40px;
          }

          button {
            width: 150px;
            height: 50px;
            border-radius: 4px;
            background-color: #fff;
            color: @md-primary-color;
            border: none;
            font-size: 18px;
            margin-top: 50px;
            cursor: pointer;
          }
        }
        &:nth-child(3) {
          .md-shared-banner-swiper-content {
            text-align: center;
            button {
              margin-top: 250px;
            }
          }
        }
      }
    }
  }

  .banner-container {
    width: 100%;
    box-sizing: border-box;
    background-size: cover;
    background-position: center center;
    position: relative;
    .banner-content {
      width: @md-main-width;
      margin: 0px auto;
      padding-top: @md-header-height;
      h1,
      p {
        color: #fff;
      }

      h1 {
        font-size: 48px;
        margin-top: 100px;
      }

      p {
        font-size: 20px;
        margin-top: 20px;
      }

      button {
        width: 150px;
        height: 50px;
        border-radius: 4px;
        background-color: #fff;
        color: @md-primary-color;
        border: none;
        font-size: 18px;
        cursor: pointer;
        margin-top: 50px;
      }
    }
  }
}
</style>
